<template>
  <ComWrapper style="padding: 0">
    <el-row justify="space-between">
      <el-col :lg="6">
        <InfoCard class="project-card" :features="featurelist" />
      </el-col>
      <el-col :lg="17">
        <el-card>
          <el-tabs v-model="activeName">
            <el-tab-pane :label="'说明'" name="feature">
              <Feature :features="featurelist" />
            </el-tab-pane>
            <el-tab-pane :label="'思考'" name="project">
              <Project />
            </el-tab-pane>
            <el-tab-pane :label="'文章'" name="article">
              <Article />
            </el-tab-pane>
            <el-tab-pane :label="'作者'" name="author">
              <Author />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </ComWrapper>
</template>

<script setup>
import {ref, defineAsyncComponent} from 'vue'
import {featurelist} from './mock/center'

const InfoCard = defineAsyncComponent(() => import('./components/InfoCard'))
const Project = defineAsyncComponent(() => import('./components/Project'))
const Feature = defineAsyncComponent(() => import('./components/Feature'))
const Article = defineAsyncComponent(() => import('./components/Article'))
const Author = defineAsyncComponent(() => import('./components/Author'))

const activeName = ref('feature')
</script>

<style scoped lang="scss">
.profile-container {
  .project-card {
    margin-right: 20px;
  }
}
</style>
